<template>
  <div>
    <headerc :title="title"></headerc>
    <div class="c-main-make">
      <div class="title-text">数据筛选</div>
      <div style="marginTop: 20px">
        <el-form
          :label-width="formLabelWidth1"
          label-position="right"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="员工姓名">
            <el-select
              filterable
              :filter-method="optinputfun"
              @change="optionfun"
              v-model="formInline.user"
              multiple
              placeholder="巡检人姓名"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.emplName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="访问时间">
            <el-date-picker
              @change="inDatetimeChange"
              v-model="formInline.inDatetime"
              align="right"
              type="date"
              placeholder="请选择时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="配电室名称">
            <el-select v-model="formInline.roomName" filterable @change="roomNameChange" placeholder="请搜索选择配电室">
              <el-option
                v-for="item in roomList1"
                :key="item.id"
                :label="item.roomName"
                :value="item.id">
              </el-option>
            </el-select>
            <!-- <el-autocomplete
              v-model="formInline.roomName"
              :fetch-suggestions="queryRoomName"
              placeholder="配电室名称"
              @select="handleinput"
              @input="newsele"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.roomName }}</div>
              </template>
            </el-autocomplete> -->
          </el-form-item>
          <div style="padding: 0 30px">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onchongzhi"
                >清除查询条件</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="c-main-show">
      <div class="main-seting">
        <div>
          <div class="title-text">数据列表</div>

          <el-button
           v-auth="'B01002'"
            style="
              float: right;
              margin-right: 20px;
              margin-bottom: 20px;
              margin-top: 20px;
            "
            icon="el-icon-download"
            @click="exportExcel"
            >导出</el-button
          >
          <el-button
            v-auth="'B01001'"
            icon="el-icon-circle-plus-outline"
            type="primary"
            @click="addfun"
            style="
              float: right;
              margin-right: 20px;
              margin-bottom: 20px;
              margin-top: 20px;
            "
            >添加</el-button
          >
          <el-dialog title="新增访问记录" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" :model="form11" ref="form11">
              <el-form-item
                prop="inDatetime"
                label="进入时间"
                :label-width="formLabelWidth"
              >
                <el-date-picker
                  v-model="form11.inDatetime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                prop="outDatetime"
                label="离开时间"
                :label-width="formLabelWidth"
              >
                <el-date-picker
                  v-model="form11.outDatetime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                prop="inEmpNum"
                label="进入人数"
                :label-width="formLabelWidth"
              >
                <el-input
                  style="width: 43%"
                  v-model="form11.inEmpNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="非专业人员姓名"
                :label-width="formLabelWidth"
              >
                <el-input
                  style="width: 43%"
                  v-model="form11.nonExpertName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="roomId"
                label="配电室名称"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.roomId" filterable @change="roomNameChange" placeholder="请搜索选择配电室">
                  <el-option
                    v-for="item in roomList"
                    :key="item.id"
                    :label="item.roomName"
                    :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-autocomplete
                  style="width: 43%"
                  v-model="form11.roomName"
                  :fetch-suggestions="querySearchAsync2"
                  placeholder="配电室名称"
                  @select="handleinput"
                  @input="newsele"
                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.roomName }}</div>
                  </template>
                </el-autocomplete> -->
              </el-form-item>
              <el-form-item
                prop="inReason"
                label="进入事由"
                :label-width="formLabelWidth"
              >
                <el-select v-model="form11.inReason" placeholder="请选择">
                  <el-option label="停送电操作" :value="1"></el-option>
                  <el-option label="设备巡检" :value="2"></el-option>
                  <el-option label="清扫卫生" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                prop="empName"
                label="进入人员"
                :label-width="formLabelWidth"
              >
                <el-select
                  :filter-method="optinputfun"
                  filterable
                  @change="optionfun"
                  v-model="form11.empName"
                  multiple
                  placeholder="巡检人姓名"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.emplName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  style="width: 43%"
                  v-model="form11.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addFalse">取 消</el-button>
              <el-button type="primary" @click="queding">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="更新访问记录" :visible.sync="dialog">
            <el-form :model="form111" ref="form111">
              <el-form-item label="进入时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="form111.inDatetime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="离开时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="form111.outDatetime"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="进入人数" :label-width="formLabelWidth">
                <el-input
                  style="width: 43%"
                  v-model="form111.inEmpNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="非专业人员姓名"
                :label-width="formLabelWidth"
              >
                <el-input
                  style="width: 43%"
                  v-model="form111.nonExpertName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="配电室名称" :label-width="formLabelWidth">
                <el-select v-model="form111.roomId" filterable @change="roomNameChange" placeholder="请搜索选择配电室">
                  <el-option
                    v-for="item in roomList"
                    :key="item.id"
                    :label="item.roomName"
                    :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-autocomplete
                  style="width: 43%"
                  v-model="form111.roomName"
                  :fetch-suggestions="querySearchAsync2"
                  placeholder="配电室名称"
                  @select="handleinput"
                  @input="newsele"
                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.roomName }}</div>
                  </template> -->
                <!-- </el-autocomplete> -->
              </el-form-item>
              <el-form-item label="进入事由" :label-width="formLabelWidth">
                <el-select v-model="form111.inReason" placeholder="请选择">
                  <el-option label="停送电操作" :value="1"></el-option>
                  <el-option label="设备巡检" :value="2"></el-option>
                  <el-option label="清扫卫生" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                prop="empName"
                label="进入人员"
                :label-width="formLabelWidth"
              >
                <el-select
                  :filter-method="optinputfun"
                  filterable
                  @change="changeInName"
                  v-model="form111.employeeNames"
                  multiple
                  placeholder="进入人员"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.emplName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input
                  style="width: 43%"
                  v-model="form111.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancelAdd">取 消</el-button>
              <el-button type="primary" @click="updatafun">更 新</el-button>
            </div>
          </el-dialog>
          <!-- table列表 -->
          <div style="margin: 20px">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#F6F7FB' }"
            >
              <el-table-column prop="empName" label="姓名"> </el-table-column>
              <el-table-column label="进入时间" width="170">
                <template slot-scope="scope">
                  <span>{{ timefun(scope.row.inDatetime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="离开时间" width="170">
                <template slot-scope="scope">
                  <span>{{ timefun(scope.row.outDatetime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="inReason" label="进入事由">
                <template slot-scope="scope">
                  <span>{{ inReasonfun(scope.row.inReason) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="inEmpNum" label="进入人数" width="80">
              </el-table-column>
              <el-table-column prop="roomName" label="配电室名称">
              </el-table-column>
              <el-table-column
                prop="nonExpertName"
                label="非专业人员姓名"
                width="140"
              >
              </el-table-column>
              <el-table-column prop="num" label="操作" width="150px">
                <template slot-scope="scope">
                  <el-button
                  v-auth="'B01003'"
                    @click="handlebianji(scope.row)"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="fenye">
            <el-pagination
              v-if="isUpdate"
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              :hide-on-single-page="total < 10"
              @current-change="currentChange"
              style="margin-left: 25%"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from '@/utils/utils.js'
import headerc from '@/components/header.vue'
import { exportMethod } from '@/utils/utils'
import {
  getAllAdminlist,
  roominrecordadd,
  pdroomgetAllByRoomName,
  roominrecordupdate,
  getlists,
  modelNameIndex,
  pdroomgetAllByQuery,
  roominrecordgetById
  
} from '../../api/patrol-record'
import indexVue from '../../layout/header/index.vue'
export default {
  components: {
    headerc
  },
  data() {
    return {
      nowEmployeeIds:[],
      isUpdate: true,
      rules: {
        inDatetime: [
          {
            required: true,
            message: '请输入进入时间',
            trigger: 'change'
          }
        ],
        outDatetime: [
          {
            required: true,
            message: '请输入离开时间',
            trigger: 'change'
          }
        ],
        empName: [
          { required: true, message: '请输入进入人员姓名', trigger: 'blur' }
        ],
        inReason: [
          { required: true, message: '请选择进入事由', trigger: 'change' }
        ],
        roomId: [
          { required: true, message: '请输入配电室名称', trigger: 'blur' }
        ],
        inEmpNum: [
          { required: true, message: '请输入进入人数', trigger: 'blur' }
        ]
      },
      options: '',
      uid: '',
      updata: 1,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value2: '',
      value3: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialog: false,
      form11: {
        remark: '',
        inDatetime: '',
        outDatetime: '',
        inEmpNum: '',
        roomName: '',
        inReason: '',
        nonExpertName: '',
        empName: '',
        empIds: '',
        roomId: '',
        id: '',
        recordType: 0
      },
      form111: {
        remark: '',
        inDatetime: '',
        outDatetime: '',
        inEmpNum: '',
        roomName: '',
        inReason: '',
        nonExpertName: '',
        empName: '',
        empIds: [],
        roomId: '',
        id: '',
        recordType: 0,
        employeeIds:[],
        employeeNames:[]
      },
      formLabelWidth1: '100px',
      formLabelWidth: '120px',
      currentPage2: 5,
      title: '访问记录',
      form: '',
      value1: '',
      formInline: {
        user: '',
        inDatetime: '',
        roomName: ''
      },
      roomList:[],
      roomList1:[],
      tableData: [],
      dialogVisible: false,
      dialogVisible2: false,
      PushListNow:[],
      iwannaList:[],
    }
  },
  created() {
    this.getAllAdmin()
    this.getpdroomgetAllByQuery()
  },
  methods: {
    //判断是否包含中文
    isChina(s){ 
      var patrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
      if(!patrn.exec(s)){ 
      return false; 
      }
      else{ 
      return true; 
      } 
    },
    changeInName(val){
      // this.nowEmployeeIds = val;
      console.log(val)
      var [...thisNow] = val;
      for(var i in thisNow){
        let valChina = this.isChina(thisNow[i])
        if(valChina){
          let obj = this.iwannaList.find(o => {
            console.log(o,"?????")
            return o.name === thisNow[i]
          });
          thisNow[i] = obj.id
          console.log(thisNow[i],obj.id,"~~~~~~~~");
        }
        
      }
      this.PushListNow = thisNow;
      console.log('到此为止',this.PushListNow,this.PushListNow.toString())
      // val.map()
    },
    CHANGEPEOPLE(){
      // var a = ['李慧玲', '李奇峻', '李耀鑫', '李玉福'];

    },
    cancelAdd(){
      this.dialog = false;
      this.form111={
                remark: '',
                inDatetime: '',
                outDatetime: '',
                inEmpNum: '',
                roomName: '',
                inReason: '',
                nonExpertName: '',
                empName: '',
                empIds: '',
                roomId: '',
                id: '',
                recordType: 0
              }
              this.$refs.form111.resetFields()
    },
    addFalse(){
      this.dialogFormVisible = false
      this.form11 = {
        remark: '',
        inDatetime: '',
        outDatetime: '',
        inEmpNum: '',
        roomName: '',
        inReason: '',
        nonExpertName: '',
        empName: '',
        empIds: '',
        roomId: '',
        id: '',
        recordType: 0
      }
      this.$refs.form11.resetFields()
    },
    roomNameChange(){
      // console.log(this.formInline.roomName,111111)
    },
    getpdroomgetAllByQuery(){
      pdroomgetAllByQuery({
        pageNo:1,
        pageSize:5000
      }).then(res=>{
        this.roomList = res.data.list
        this.roomList1 = res.data.list
        console.log(res.data.list,'---------')
      })
    },
    exportExcel() {
      const data = {
        pageNo: this.pageNo,
        pageSize: 5000,
        inDatetime: this.formInline.inDatetime,
        empId: this.form11.empIds,
        // roomId: this.form11.roomId
        roomId: this.formInline.roomName
      }
      exportMethod('roomInRecord', data, '配电室出入记录')
    },
    inDatetimeChange(val) {
      console.log(val)
      // utils.formatDate('yyyy-MM-dd')
      //  console.log(utils.formatDate(this.form.inDatetime,'yyyy-MM-dd'))
      this.formInline.inDatetime = utils.formatDate(
        this.form.inDatetime,
        'yyyy-MM-dd'
      )
    },
    modelNameIndex() {
      modelNameIndex('roomInRecord', { pageNo: 1, pageSize: 100 }).then(
        (res) => {}
      )
    },
    optinputfun(val) {
      this.getoption(val)
    },
    inReasonfun(inReason) {
      if (inReason == '1') {
        return '停送电操作'
      } else if (inReason == '2') {
        return '设备巡检'
      } else if (inReason == '3') {
        return '清扫卫生'
      }
    },
    getoption(val) {
      getlists({
        deptId: '',
        emplName: val,
        userType: '1'
      }).then((res) => {
        this.options = res.data
      })
    },
    optionfun(val) {
      const data = val.join(',')
      this.form11.empIds = data
    },
    handleinput(item) {
      this.form11.roomName = item.roomName
      this.form11.roomId = item.id
      this.formInline.roomName = item.roomName
    },
    newsele() {
      pdroomgetAllByRoomName({
        roomName: this.formInline.roomName,
        recordType: 0
      }).then((res) => {
        console.log(res)
        this.restaurants2 = res.data
      })
    },
    createStateFilter2(queryString) {
      return (state) => {
        console.log(state)
        return state.roomName.indexOf(queryString.toLowerCase()) != -1
      }
    },
    querySearchAsync2(queryString, cb) {
      var restaurants = this.restaurants2
      var results = queryString
        ? restaurants.filter(this.createStateFilter2(queryString))
        : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 0)
    },
    onchongzhi() {
      this.value1 = ''
      this.formInline = {
        user: '',
        roomId:'',
        roomName: ''
      }
      this.form11.empIds = ''
    },
    updatafun() {
      this.$refs.form111.validate(async (valid) => {
        if (valid) {
          // console.log(this.nowEmployeeIds,'!!!@!@!@!@!')
          // const data = {
          //   empIds: this.nowEmployeeIds,
          //   id: this.form111.id,
          //   inDatetime: this.form111.inDatetime,
          //   inEmpNum: this.form111.inEmpNum,
          //   inReason: this.form111.inReason,
          //   modifierId: this.form111.modifierId,
          //   nonExpertName: this.form111.nonExpertName,
          //   outDatetime: this.form111.outDatetime,
          //   roomId: this.form111.roomId
          // }
          console.log(this.PushListNow,'纳尼')
          roominrecordupdate(
            {
            empIds: this.PushListNow.toString(),
            id: this.form111.id,
            inDatetime: this.form111.inDatetime,
            inEmpNum: this.form111.inEmpNum,
            inReason: this.form111.inReason,
            modifierId: this.form111.modifierId,
            nonExpertName: this.form111.nonExpertName,
            outDatetime: this.form111.outDatetime,
            roomId: this.form111.roomId
          }
          ).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.dialog = false
              this.getAllAdmin()
              this.form111={
                remark: '',
                inDatetime: '',
                outDatetime: '',
                inEmpNum: '',
                roomName: '',
                inReason: '',
                nonExpertName: '',
                empName: '',
                empIds: '',
                roomId: '',
                id: '',
                recordType: 0,
                employeeIds:[],
                employeeNames:[]
              }
              this.$refs.form111.resetFields()
            }
          })
        }
      })
    },
    handlebianji(val) {
      this.uid = val.id
      console.log(val,'---------',this.uid)
      roominrecordgetById(this.uid).then(res=>{
        console.log(res,'hahahahahhaha')
        this.form111 = {
          inDatetime: utils.formatDate(res.data.inDatetime, 'yyyy-MM-dd HH:mm:ss'),
          outDatetime: utils.formatDate(res.data.outDatetime, 'yyyy-MM-dd HH:mm:ss'),
          empName: res.data.empName,
          id: res.data.id,
          nonExpertName: res.data.nonExpertName,
          inEmpNum: res.data.inEmpNum,
          inReason: res.data.inReason,
          empId: res.data.empId,
          roomId: res.data.roomId,
          employeeIds: res.data.employeeIds,
          //回显数组
          employeeNames: res.data.employeeNames
        }
        this.PushListNow = this.form111.employeeIds
        // this.nowEmployeeIds = this.form111.employeeIds
        //为了多选模糊搜索
        let nameLists =  res.data.employeeNames;
        let idLists =  res.data.employeeIds;
        let iwanna = []
        nameLists.forEach((item,index)=>{
          let items = {}
          items.name = item;
          items.id = idLists[index]
          iwanna.push(items)
        })
        this.iwannaList = iwanna
        
        console.log(iwanna,"!!!!!!!!!!!!!!!!!!!!!!")
        this.dialog = true

      })
      
    },
    addfun() {
      this.dialogFormVisible = true
    },
    timefun(data) {
      return utils.formatDate(data, 'yyyy-MM-dd HH:mm:ss')
    },
    currentChange(pageNo) {
      this.pageNo = pageNo
      this.getAllAdmin()
    },
    queding() {
      this.$refs.form11.validate(async (valid) => {
        if (valid) {
          roominrecordadd(this.form11).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: '创建成功',
                type: 'success'
              })
              this.getAllAdmin()
              this.dialogFormVisible = false
              this.form11 = {
                remark: '',
                inDatetime: '',
                outDatetime: '',
                inEmpNum: '',
                roomName: '',
                inReason: '',
                nonExpertName: '',
                empName: '',
                empIds: '',
                roomId: '',
                id: '',
                recordType: 0
              }
              this.$refs.form11.resetFields()
              this.getAllAdmin()
            }
          })
        }
      })
    },
    async getAllAdmin(params) {
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        inDatetime: this.formInline.inDatetime,
        empId: this.form11.empIds,
        roomId: this.formInline.roomName
        // roomId: this.form11.roomId
      }
      getAllAdminlist(data).then((res) => {
        this.isUpdate = true
        console.log(res, '00000000000000')
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    onSubmit() {
      this.pageNo = 1
      this.isUpdate = false
      console.log('dsadsa')
      this.getAllAdmin()

      // const data = {
      //   pageNo: this.pageNo,
      //   pageSize: this.pageSize,
      //   inDatetime: this.formInline.inDatetime,
      //   empId: this.form11.empIds,
      //   roomId: this.form11.roomId
      // }
      // console.log(data)
      // console.log('===data==')

      // getAllAdminlist(data).then((res) => {
      //   console.log(res.data, 'data11111111111')
      //   if (res.data.code == '200') {
      //     this.tableData = res.data.list
      //     this.total = res.data.data.total
      //   }
      // })
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.c-main-make {
  background: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.c-main-show {
  padding-bottom: 20px;
  background: #fff;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  padding-left: 25px;
}
.fenye {
  display: flex;
  justify-content: right;
}
</style>
